<template>
  <view
    class="swiper-container"
    :style="{ backgroundColor: component.backgroundColor ?? '#f5f6fa' }"
  >
    <v-swiper
      :list="swiperList"
      :height="height"
      :card="component.type === 'card'"
      width="100vw"
      autoplay
      type="mask"
      :interval="component.interval * 1000"
      @click="clickHandle"
      @update:current="current = $event"
    />
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  component: StorePageSwiperItem;
}>();

const emits = defineEmits<{
  navigate: [event: string, value: string | undefined];
}>();

const swiperList = computed(() => {
  if (!props.component) return [];
  const list: { src: string; isVideo?: boolean }[] = [];
  list.push(
    ...props.component.swiperList.map((item) => ({ src: item.url, ...item }))
  );
  return list;
});

const current = ref(0);
const clickHandle = (item: StorePageSwiperItem['swiperList'][number]) => {
  if (item.event === 'page') {
    emits('navigate', item.event, item.page);
  } else if (item.event === 'product') {
    emits('navigate', item.event, item.product);
  }
};

const height = computed(() => `${props.component.swiperHeight ?? 750}rpx`);
</script>

<style lang="scss" scoped>
.swiper-container {
  position: relative;
}
</style>
